.yc-link {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  position: relative;
  text-decoration: none;
  outline: none;
  cursor: pointer;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
  &.is-disabled {
    cursor: not-allowed;
  }
  &.is-underline:hover:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    bottom: 0;
    border-bottom: 1px solid $primary;
  }
  &--default {
    color: $fontRegular;
    &:hover {
      color: $primary;
    }
    &.is-disabled {
      color: $fontPlaceholder;
    }
    &:after {
      border-color: $primary;
    }
  }
  &--primary {
    color: $primary;
    &.is-disabled {
      color: $primaryDisabled;
    }
    &:after {
      border-color: $primary;
    }
    &:hover {
      color: $primaryHover;
    }
  }
  &--success {
    color: $success;
    &.is-disabled {
      color: $successDisabled;
    }
    &:after {
      border-color: $success;
    }
    &:hover {
      color: $successHover;
    }
    &.is-underline:hover:after {
      border-color: $successDisabled;
    }
  }
  &--warning {
    color: $warning;
    &.is-disabled {
      color: $warningDisabled;
    }
    &:after {
      border-color: $warning;
    }
    &:hover {
      color: $warningHover;
    }
    &.is-underline:hover:after {
      border-color: $warning;
    }
  }
  &--danger {
    color: $danger;
    &.is-disabled {
      color: $dangerDisabled;
    }
    &:after {
      border-color: $danger;
    }
    &:hover {
      color: $dangerHover;
    }
    &.is-underline:hover:after {
      border-color: $danger;
    }
  }
  &--info {
    color: $info;
    &.is-disabled {
      color: $infoDisabled;
    }
    &:after {
      border-color: $info;
    }
    &:hover {
      color: $infoHover;
    }
    &.is-underline:hover:after {
      border-color: $info;
    }
  }
}